<template>
  <div class="APP">
    <button @click="isShow">显示</button>
    <div class="box" v-if="flag">
      点击除了我以外的地方我就会隐藏
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
// import { onClickOutside } from "node_modules/@vueuse/core/dist";
export default {
  setup(props, { emit }) {
    //   控制是否隐藏
    let flag = ref(false);
    // 要给盒子绑定一个 ref 获取当前元素
    const target = ref(null);
    // 点击其他位置隐藏
    // onClickOutside(target, () => {});
    // 点击显示
    function isShow() {
      flag.value = true;
    }
    return { isShow, flag };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
button {
  width: 100px;
  height: 30px;
  margin: 20px;
}
.box {
  width: 500px;
  height: 500px;
  background-color: rgb(226, 110, 110);
  margin: 20px;
}
</style>
